
<div style="POSITION: relative" id="content">
  <h3>easyUI 基础的拖动和放置</h3>
  <div id="article_content" class="article_content">
    <p>这个教程向你展示如何使HTML元素可拖动,如下例,我们将创建3个div元素然后启用他们的拖动和放置.</p>
    <p><img src="documentation/images/1344397537_6005.png" alt=""><br>
    </p>
    <p>首先我们创建3个div元素</p>
    <p>
    <pre name="code" class="html">&lt;div id=&quot;dd1&quot; class=&quot;dd-demo&quot;&gt;&lt;/div&gt;  
&lt;div id=&quot;dd2&quot; class=&quot;dd-demo&quot;&gt;&lt;/div&gt;  
&lt;div id=&quot;dd3&quot; class=&quot;dd-demo&quot;&gt;&lt;/div&gt;  </pre>
    对于第一个div元素,我们通过默认&#20540;让其可以拖动.
    </p>
    <p>
    <pre name="code" class="javascript">$('#dd1').draggable();  </pre>
    对于第二个div元素,我们通过一个代理(proxy)克隆(clone)原来的元素让其可以拖动.
    </p>
    <p>
    <pre name="code" class="javascript">$('#dd2').draggable({  
    proxy:'clone'  
});</pre>
    对于第三个div元素,我们将通过创建自定义代理(proxy)让其可以拖动.
    </p>
    <p>
    <pre name="code" class="javascript">$('#dd3').draggable({  
    proxy:function(source){  
        var p = $('&lt;div class=&quot;proxy&quot;&gt;proxy&lt;/div&gt;');  
        p.appendTo('body');  
        return p;  
    }  
});  </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载EasyUI 示例:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://jquery-easyui.googlecode.com/svn/trunk/share/tutorial/dnd/easyui-dnd-demo1.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-dnd-demo.zip</a></div>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>